<template>
    <div class="addStore">
        <div class="topNav">
            <el-divider class="topLine"><i class="lineIcon el-icon-document-copy"></i><span
                    class="lineTitle" id="optionStore">新建店铺管理表</span></el-divider>
        </div>
        <div class="storeSetNav">
        </div>

        <div class="addContent">
            <!--开启表单验证：:rules="rules" ref="moudle" 表单右侧验证符号 status-icon -->
            <el-form :model="store" status-icon :rules="rules" label-width="100px" ref="store"
                     :label-position="labelPosition">

                <el-row :gutter="20">
                    <el-col :span="12" >
                        <el-card class="box-card" >
                            <el-form-item label="店铺名称" prop="defName">
                                <el-input id="defName" class="inputLine" v-model="store.defName" placeholder="输入店铺所在地即可，如枣强县/大营村"></el-input>
                            </el-form-item>

                            <el-form-item label="店铺类型" prop="typeId">
                                <el-select id="typeId" class="inputLine" v-model="store.typeId" @change="getTypeId" placeholder="请选择">
                                    <el-option
                                            v-for="item in STORE_TYPE"
                                            :key="item.key"
                                            :label="item.value"
                                            :value="item.key"
                                            :disabled="item.disabled"
                                            :change="typeChange(item.value)"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <!-- 级联选择器
                           注意，这里的:props属性{}必须写在标签内，如果调用data的属性，会报错
                           Invalid prop: type check failed for prop "props". Expected Object, got Array
                           :prop:{multiple:true}：支持多选
                           change-on-select:单选，可选一级分类，二级分类
                           :show-all-levels="false"：选择全部分级，默认为true
                           v-model="value" ：选中项绑定值
                           getCheckedNodes：获取选中的leaf值，需要ref
                           filterable：是否可搜素
                           v-model:绑定选中后的参数
                           -->
                            <el-form-item label="门店所在区域" prop="address">
                                <el-cascader class="categoryInput inputOptionLine" ref="addressInput"
                                             placeholder="输入内容搜索分类"
                                             v-model="add"
                                             :options="address"
                                             :props="{value:'id',label:'areaname',children:'children'}"
                                             separator=" / "
                                             @change="addressChange">
                                </el-cascader>
                            </el-form-item>

                            <el-form-item label="门店全称" prop="fullName">
                                <el-input id="fullName" class="inputLine" v-model="store.fullName"></el-input>
                            </el-form-item>

                            <el-form-item label="负责人" prop="manager">
                                <el-input id="manager" class="inputLine" v-model="store.manager"></el-input>
                            </el-form-item>


                            <el-form-item label="手机号" prop="managerTel">
                                <el-input id="managerTel" class="inputLine" v-model="store.managerTel"></el-input>
                            </el-form-item>

                            <el-form-item label="店铺状态" prop="storeStatus">
                                <el-select id="typeId" class="inputLine" v-model="store.storeStatus" placeholder="请选择">
                                    <el-option
                                            v-for="item in STORE_STATUS"
                                            :key="item.key"
                                            :label="item.value"
                                            :value="item.key"
                                            :disabled="item.disabled">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="店铺说明" prop="storeRemark">
                                <el-input type="textarea" :rows="4" id="storeRemark" class="inputLine" v-model="store.storeRemark"></el-input>
                            </el-form-item>

                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card class="box-card" >
                            <el-form-item label="全款金额" prop="payFull">
                                <el-input-number id="payFull" class="inputLine" :precision="2" v-model="store.payFull"></el-input-number>
                            </el-form-item>

                            <el-form-item label="支付状态" prop="payStatus">
                                <el-select id="typeId" class="inputLine" v-model="store.payStatus" placeholder="请选择">
                                    <el-option
                                            v-for="item in PAY_STATUS"
                                            :key="item.key"
                                            :label="item.value"
                                            :value="item.key"
                                            :disabled="item.disabled">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="微信支付" prop="payWechatAmount">
                                <el-input-number id="payWechatAmount" class="inputLine" :precision="2" v-model="store.payWechatAmount" @change="payWechatAmountChange($event)"></el-input-number>
                            </el-form-item>

                            <el-form-item label="支付宝支付" prop="payAliAmount">
                                <el-input-number id="payAliAmount" class="inputLine" :precision="2" v-model="store.payAliAmount" @change="payAliAmountChange($event)"></el-input-number>
                            </el-form-item>

                            <el-form-item label="余额支付" prop="payBalanceAmount">
                                <el-input-number id="payBalanceAmount" class="inputLine" :precision="2" v-model="store.payBalanceAmount" @change="payBalanceAmountChange($event)"></el-input-number>
                            </el-form-item>

                            <el-form-item label="银行卡支付" prop="payBankAmount">
                                <el-input-number id="payBankAmount" class="inputLine" :precision="2" v-model="store.payBankAmount" @change="payBankAmountChange($event)"></el-input-number>
                            </el-form-item>

                            <el-form-item label="现金支付" prop="payCashAmount">
                                <el-input-number id="payCashAmount" class="inputLine" :precision="2" v-model="store.payCashAmount" @change="payCashAmountChange($event)"></el-input-number>
                            </el-form-item>

                            <el-form-item label="总支付金额" prop="payAccount">
                                <el-input  id="payAccount" class="inputAccountLine" v-model="store.payAccount" disabled>
                                    <template slot="append" class="moneyIcon">￥</template></el-input>
                            </el-form-item>

                            <el-form-item label="剩余欠款" prop="payDebt">
                                <el-input id="payDebt" class="inputAccountLine" v-model="store.payDebt" disabled>
                                    <template slot="append" class="moneyIcon">￥</template>
                                </el-input>
                            </el-form-item>
                        </el-card>
                    </el-col>
                </el-row >

                <el-card class="box-card uploadBox" >

                    <el-form-item label="支付凭证" prop="picList">
                        <big-file :upload-tile="'上传支付凭证'" :input-id="'upload-store-icon'"
                                  :suffix-type="['jpg','jpeg','png','gif']"
                                  :uniId="store.uniId" :use-type="SOURCE_USE_TYPE.SOURCE_PUBLIC.key"
                                  :after-upload="afterUpload"></big-file>
                    </el-form-item>

                    <el-row class="upload-file-list" v-if="files.length>0">
                        <el-col :span="20">
                            <div class="file-image" v-for="file in files" :key="file.index">
                                <el-image class="img-url"
                                          :src="file"
                                          :preview-src-list="files"
                                >
                                </el-image>
                                <div class="img-after">
                                    <!--<span class="glyphicon glyphicon-trash"></span>
                                    <p>刪除</p>-->
                                    <el-button class="img-del" type="danger" icon="glyphicon glyphicon-trash"
                                               @click="removeImg(file)"></el-button>
                                </div>

                            </div>
                        </el-col>
                    </el-row>

                    <el-form-item label="店铺门头" prop="storeFront">
                        <big-file :upload-tile="'上传店铺门头'" :input-id="'upload-store-front-icon'"
                                  :suffix-type="['jpg','jpeg','png','gif']"
                                  :uniId="store.uniId" :use-type="SOURCE_USE_TYPE.SOURCE_PUBLIC.key"
                                  :after-upload="afterFrontUpload"></big-file>
                    </el-form-item>

                    <el-row class="upload-file-list" v-if="filesFront.length>0">
                        <el-col :span="20">
                            <div class="file-image" v-for="file in filesFront" :key="file.index">
                                <el-image class="img-url"
                                          :src="file"
                                          :preview-src-list="filesFront"
                                >
                                </el-image>
                                <div class="img-after">
                                    <!--<span class="glyphicon glyphicon-trash"></span>
                                    <p>刪除</p>-->
                                    <el-button class="img-del" type="danger" icon="glyphicon glyphicon-trash"
                                               @click="removeFrontImg(file)"></el-button>
                                </div>

                            </div>
                        </el-col>
                    </el-row>

                    <el-form-item label="门头达标" prop="storeFrontType">
                        <el-select id="typeId" class="inputLine" v-model="store.storeFrontType" placeholder="请选择">
                            <el-option
                                    v-for="item in STORE_FRONT_TYPE"
                                    :key="item.key"
                                    :label="item.value"
                                    :value="item.key"
                                    :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item>


                    <el-form-item label="店铺门头补贴" prop="subsidy">
                        <el-input id="subsidy" class="inputAccountLine" v-model="store.subsidy" >
                            <template slot="append" class="moneyIcon">￥</template>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="补贴状态" prop="subsidyType">
                        <el-select id="typeId" class="inputLine" v-model="store.subsidyType" placeholder="请选择">
                            <el-option
                                    v-for="item in SUBSIDY_TYPE"
                                    :key="item.key"
                                    :label="item.value"
                                    :value="item.key"
                                    :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item>


                    <el-form-item label="补贴说明" prop="subsidyRemark">
                        <el-input type="textarea" :rows="4" id="subsidyRemark" class="inputLine" v-model="store.subsidyRemark"></el-input>
                    </el-form-item>
                </el-card>



                <el-form-item>
                    <!--这里save(formName)方法保存，ref别名的store-->
                    <el-button id="submitBtn" type="primary" @click="save('store')">立即创建</el-button>
                    <el-button @click="resetForm('store')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import BigFile from "../../../components/BigFile";
    export default {
        name: "AddStore",
        components:{BigFile},
        props: {
            list: {
                type: Function,
                default: null
            },
        },
        data() {
            let defNameValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("店铺名称不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("店铺名称长度至少3位"));
                } else {
                    callback();
                }
            }
            let fullNameValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("门店全称不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("门店全称长度至少3位"));
                } else {
                    callback();
                }
            }
            let managerTelValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1

                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("手机号不能为空"));
                } else if (getLength(value) < 11) {
                    callback(new Error("手机号长度至少11位"));
                } else {
                    callback();
                }
            }
            let numberREG=(rule, value, callback)=>{
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }
                if (value === '') {
                    callback(new Error("全款不能为空"));
                } else if (getLength(value) < 3) {
                    callback(new Error("全款金额至少为3位数"));
                } else{
                    callback();
                }
            }
            let storeRemarkValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("店铺说明不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("店铺说明长度至少3位"));
                } else {
                    callback();
                }
            }
            let subsidyRemarkValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("补贴说明不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("补贴说明长度至少3位"));
                } else {
                    callback();
                }
            }

            return {
                message: '这里是更新店铺管理表页面',
                store: {
                    uniId: '',
                    defName: '',
                    fullName: '',
                    province: '',
                    city: '',
                    district: '',
                    typeId: '',
                    manager: '',
                    managerTel: '',
                    payStatus: '',
                    payFull: 0,
                    payWechatAmount: 0,
                    payAliAmount: 0,
                    payBalanceAmount: 0,
                    payBankAmount: 0,
                    payCashAmount: 0,
                    payDebt: 0,
                    payAccount:0,
                    storeStatus: '',
                    picList: '',
                    storeRemark: '',
                    storeFront: '',
                    storeFrontType: STORE_FRONT_TYPE.PASS_OFF.key,
                    subsidy: 600,
                    subsidyType: SUBSIDY_TYPE.SUBSIDY_UN.key,
                    subsidyRemark: '',
                    createTime: '',
                    updateTime: '',
                },
                labelPosition: 'left',

                rules: {
                    defName: [
                        {validator: defNameValidate, trigger: 'blur'}
                    ],
                    /*fullName: [
                        {validator: fullNameValidate, trigger: 'blur'}
                    ],*/
                    managerTel: [
                        {validator: managerTelValidate, trigger: 'blur'},
                    ],
                    manager:[
                        {required:true,message:'门店负责人不能为空',trigger:'blur'}
                    ],
                    payFull:[
                        {type:'number',message:'全款金额必须为数字'}
                    ],
                    payWechatAmount:[
                        {type:'number',message:'微信支付必须为数字'}
                    ],
                    payAliAmount:[
                        {type:'number',message:'支付宝支付必须为数字'}
                    ],
                    payBalanceAmount:[
                        {type:'number',message:'余额支付必须为数字'}
                    ],
                    payBankAmount:[
                        {type:'number',message:'刷卡支付必须为数字'}
                    ],
                    payCashAmount:[
                        {type:'number',message:'现金支付必须为数字'}
                    ],
                    /*subsidy:[
                        {type:'number',message:'门头补贴必须为数字'}
                    ],*/

                    /*storeRemark: [
                        {validator: storeRemarkValidate, trigger: 'blur'}
                    ],
                    subsidyRemark: [
                        {validator: subsidyRemarkValidate, trigger: 'blur'}
                    ],*/


                },
                //枚举类
                STORE_TYPE:STORE_TYPE,
                PAY_STATUS:PAY_STATUS,
                STORE_STATUS:STORE_STATUS,
                STORE_FRONT_TYPE:STORE_FRONT_TYPE,
                SUBSIDY_TYPE:SUBSIDY_TYPE,
                SOURCE_USE_TYPE:SOURCE_USE_TYPE,
                typeName:"",
                //自动计算金额

                //级联选择
                address: [],
                add:[],
                //文件上传
                files:[],
                filesFront:[],
            }
        },
        mounted() {
            if(Tool.isNotEmpty(SessionStorage.get(ADD))){
                this.address=SessionStorage.get(ADD);
            }

            if (this.$route.params.store != null) {
                this.store = this.$route.params.store;
                if(this.$route.params.add!=null){
                    this.add=this.$route.params.add || [];
                }
                this.files=this.store.picList;
                this.filesFront=this.store.storeFront;
                let optionStore = document.getElementById("optionStore");
                let submitBtn = document.getElementById("submitBtn");
                optionStore.innerHTML = '更新店铺管理表';
                submitBtn.innerHTML = "立即更新";
            }

        },
        methods: {

            //1.新增店铺管理表
            save(formName) {
                let _this = this;
                let responseMsg = '';
                this.store.picList=this.files;
                this.store.storeFront=this.filesFront;
                //前端校验
                this.$refs[formName].validate((valid) => {
                    if (valid) {

                        this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/store/save', this.store)
                            .then((response) => {
                                let resp = response.data;
                                responseMsg = response;

                                if (resp.success) {
                                    this.$router.push("/business/store/set");
                                    //引入全局变量toast提示
                                    toast.success("保存成功", "bottom-end");
                                } else {
                                    this.$notify({
                                        title: '填写内容错误',
                                        message: resp.responseMsg,
                                        position: "bottom-right",
                                        type: 'warning'
                                    });
                                }
                            })
                    } else {
                        this.$notify({
                            title: '填写内容错误',
                            message: '请按照提示内容填写正确信息',
                            position: "top-right",
                            type: 'warning'
                        });
                        return false;
                    }
                });

            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            getTypeId(id){
                this.typeId=id;
            },
            typeChange(item){
                this.typeName=Tool.optionObjectKV( STORE_TYPE,this.store.typeId);
                let full=document.getElementById("fullName");
                //full.innerHTML="";
                //this.store.fullName="";
                if(Tool.isNotEmpty(this.store.fullName) && this.store.province!==null && this.store.city!==null && this.store.district!==null){
                    this.store.fullName=this.store.province.add+"-"+this.store.city.add+"-"+this.store.district.add+"-"+this.store.defName+this.typeName;
                }
            },
            addressChange(){
                let full=document.getElementById("fullName");
                full.innerHTML="";
                this.store.fullName="";

                let checkedNodes = this.$refs.addressInput.getCheckedNodes()[0];
                let province=checkedNodes.parent.parent.label;
                let provinceId=checkedNodes.parent.parent.data.id;
                let city=checkedNodes.parent.label;
                let cityId=checkedNodes.parent.data.id;
                let district=checkedNodes.label;
                let districtId=checkedNodes.data.id;
                this.store.province={add:province,id:provinceId};
                this.store.city={add:city,id:cityId};
                this.store.district={add:district,id:districtId};

                this.store.fullName=province+"-"+city+"-"+district+"-"+this.store.defName+this.typeName;
            },
            payWechatAmountChange(currentValue){
                this.store.payWechatAmount=currentValue;
                this.getPayAccount();
            },
            payAliAmountChange(currentValue){
                this.store.payAliAmount=currentValue;
                this.getPayAccount();
            },
            payBalanceAmountChange(currentValue){
                this.store.payBalanceAmount=currentValue;
                this.getPayAccount();
            },
            payBankAmountChange(currentValue){
                this.store.payBankAmount=currentValue;
                this.getPayAccount();
            },
            payCashAmountChange(currentValue){
                this.store.payCashAmount=currentValue;
                this.getPayAccount();
            },
            //总支付金额
            getPayAccount(){
                let payAccount=document.getElementById("payAccount");
                let pay= this.store.payWechatAmount+this.store.payAliAmount+this.store.payBalanceAmount+this.store.payBankAmount+this.store.payCashAmount;
                this.store.payAccount=pay;
                this.store.payDebt=this.store.payFull-this.store.payAccount;
            },
            afterUpload(resp) {
                if (resp.success) {
                    //this.module.picList=resp.responseData.path;
                    let storeId = this.store.uniId;
                    let picPath = resp.responseData.path;
                    if (!Tool.isEmpty(storeId)) {
                        this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/store/savePicList',
                            {
                                moduleId: storeId,
                                picPath: picPath
                            })
                            .then((response) => {
                                let resp = response.data;
                                if (resp.success) {
                                    let pics = [];
                                    for (let i = 0; i < resp.responseData.length; i++) {
                                        pics.push(resp.responseData[i]);
                                    }
                                    this.files = pics;
                                    toast.success("保存成功", "bottom-end");
                                } else {
                                    this.$notify({
                                        title: '保存失败，请联系管理员',
                                        message: resp.responseMsg,
                                        position: "top-right",
                                        type: 'warning'
                                    });
                                }
                            })
                    } else {
                        this.files.push(picPath);
                    }
                }

            },
            //删除图片
            removeImg(file) {
                let boxMessage = document.querySelectorAll(".el-message-box .el-message-box__content .el-message-box__container .el-message-box__message p");
                for (let i = 0; i < boxMessage.length; i++) {
                    boxMessage[i].style = "word-wrap:break-word";
                }
                this.$confirm('确认删除 【' + file + '】文件？', '删除图片操作', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.files.splice(this.files.indexOf(file), 1);
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消删除'
                    });
                });

            },

            afterFrontUpload(resp) {
                if (resp.success) {
                    //this.module.picList=resp.responseData.path;
                    let storeId = this.store.uniId;
                    let picPath = resp.responseData.path;
                    if (!Tool.isEmpty(storeId)) {
                        this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/store/saveStoreFront',
                            {
                                moduleId: storeId,
                                picPath: picPath
                            })
                            .then((response) => {
                                let resp = response.data;
                                if (resp.success) {
                                    let pics = [];
                                    for (let i = 0; i < resp.responseData.length; i++) {
                                        pics.push(resp.responseData[i]);
                                    }
                                    this.filesFront = pics;
                                    //上传门头完毕，更新门头达标状态
                                    this.store.storeFrontType=STORE_FRONT_TYPE.PASS_ON.key;
                                    toast.success("保存成功", "bottom-end");
                                } else {
                                    this.$notify({
                                        title: '保存失败，请联系管理员',
                                        message: resp.responseMsg,
                                        position: "top-right",
                                        type: 'warning'
                                    });
                                }
                            })
                    } else {
                        this.filesFront.push(picPath);
                    }
                }

            },
            //删除图片
            removeFrontImg(file) {
                let boxMessage = document.querySelectorAll(".el-message-box .el-message-box__content .el-message-box__container .el-message-box__message p");
                for (let i = 0; i < boxMessage.length; i++) {
                    boxMessage[i].style = "word-wrap:break-word";
                }
                this.$confirm('确认删除 【' + file + '】文件？', '删除图片操作', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    console.log("要删除的文件：", file);
                    this.filesFront.splice(this.filesFront.indexOf(file), 1);
                    console.log("删除后的files：", this.filesFront);
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消删除'
                    });
                });

            },

        },
    }
</script>

<style scoped>
    /*顶部line样式*/
    .topNav {

    }

    /deep/ .el-divider__text {
        background-color: #1d7dd6;
        padding: 8px 20px;
    }

    .topLine {
        background-color: #1d7dd6;
    }

    .lineIcon {
        font-size: 22px;
        color: #ffffff;
        position: relative;
        margin-right: 5px;
    }

    .lineTitle {
        position: relative;
        font-size: 16px;
        color: #ffffff;
    }

    /*店铺管理表设置导航*/
    .storeSetNav {
        max-width: 400px;
        margin: 5px auto;

    }

    .storeSetNavTile {
        cursor: pointer;
    }

    /*内容区位置*/
    .addContent {
        margin-left: 5%;
        margin-top: 35px;
        margin-right: 5%;
    }

    /deep/ .el-form-item {
        margin-bottom: 5px;
    }

    /*输入行控制*/
    .inputLine {
        max-width: 350px;
        float: left;
    }
    .inputOptionLine{
        min-width: 180px;
        max-width: 350px;
        float: left;
    }
    .inputAccountLine{
        max-width: 180px;
        float: left;
    }
    /deep/ .el-input-group__append, .el-input-group__prepend{
        color: white;
        background-color: #ff6f00;
        vertical-align: middle;
        display: table-cell;
        position: relative;
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        padding: 0 20px;
        width: 1px;
        white-space: nowrap;
    }

    /*关键字标签*/
    .el-tag + .el-tag {
        margin-left: 10px;
    }

    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }

    .titleLeft {
        float: left;
    }

    /*SEO描述*/
    .textAreaWidth {
        max-width: 400px;
        float: left;
    }
    .uploadBox{
        margin-top: 20px;
    }
    /*图片上传：取消upload打开的input默认按钮*/
    /deep/ input[type=file] {
        display: none;
    }

    /*错误提示*/
    #storeTitle {
        float: left;
    }

    /deep/ .el-form-item__error {
        float: left;
        position: relative;
        line-height: 30px;
        margin-left: 10px;
    }

    /*提示框的字符颜色*/
    /deep/ .el-input__prefix, .el-input__suffix {
        color: #44cd3f;
        font-size: 18px;
    }

    /deep/ .el-input__icon {
        color: #44cd3f;
        font-size: 18px;
    }

    /*是否显示*/
    /deep/ .el-switch {
        line-height: 40px;
    }

    /*输入框禁用样式*/
    /deep/ .el-input.is-disabled .el-input__inner{
        color: #ee582a;
        font-weight: bolder;
        font-size: 18px;
    }

    /*文件列表*/
    /deep/ input[type=file] {
        display: block;
        margin-left: -400px;
    }

    .upload-file-list {
        margin-bottom: 10px;
        margin-top: -40px;
        margin-left: 13%;
    }

    .upload-file-list .el-image {
        width: 150px;
        float: left;
        padding: 5px;
        border: 1px solid #cccccc;
        margin-right: 5px;
    }

    .upload-file-list .file-image .img-url {
        position: relative;
    }

    .upload-file-list .file-image .img-after {
        position: relative;
        float: left;
        margin-top: 56px;
        margin-left: -37px;
        color: white;
    }

    .upload-file-list .file-image .img-after .img-del {
        padding: 5px;
        border-radius: 0;
        background-color: #e92322;
        border: 1px solid #ffffff;
    }

    .upload-file-list .file-image .img-after .img-del:hover {
        background-color: #f6504f;
    }
</style>